<template>
  <el-dialog
      title="预登记审核"
      v-if="modelValue"
      :model-value="modelValue"
      width="500px"
      append-to-body
      @close="handleClose"
  >
    <el-form ref="auditFormRef" :model="auditForm" :rules="auditRules" label-width="100px">
      <el-form-item label="审核结果" prop="status">
        <el-radio-group v-model="auditForm.status">
          <el-radio :label="'1'">通过</el-radio>
          <el-radio :label="'2'">不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="拒绝原因" prop="remark" v-if="auditForm.status === '2'">
        <el-input v-model="auditForm.remark" type="textarea" placeholder="请输入拒绝原因"/>
      </el-form-item>
      <el-form-item label="审核意见" prop="remark" v-else>
        <el-input v-model="auditForm.remark" type="textarea" placeholder="请输入审核意见"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AuditDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    registerId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      auditForm: {
        id: null,
        status: "1",
        remark: ""
      },
      auditRules: {
        status: [
          {required: true, message: "审核结果不能为空", trigger: "change"}
        ]
      }
    };
  },
  watch: {
    modelValue(val) {
      if (val) {
        this.reset();
        this.auditForm.id = this.registerId;
      }
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.auditFormRef.validate(valid => {
        if (valid) {
          this.loading = true;

          // 触发提交事件，由父组件处理API调用
          this.$emit('submit', {
            id: this.auditForm.id,
            status: this.auditForm.status,
            remark: this.auditForm.remark
          });

          // 父组件需要处理loading的结束
          // 这里不关闭对话框，由父组件决定是否关闭
        }
      });
    },

    // 关闭对话框
    handleClose() {
      this.$emit('update:modelValue', false);
    },

    // 重置表单
    reset() {
      this.auditForm = {
        id: this.registerId,
        status: "1",
        remark: ""
      };
    }
  }
};
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}
</style>

